<template>
	<view class="content-header">
		<view class="centos flex-column" v-if="can">
			<swiper class="swiper-box" @change="change" :circular="true">
				<swiper-item v-for="(item,index) in share_background" :key="index">
					<view class="swiper-item">
						<mu-canvas :canvasId="`mu-canvas`+index" ref="share" width="650" unit="rpx"
							height="1110" backgroundColor="#FFFFFF" :elementList="share_background[index]" :auto="true"></mu-canvas>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view v-else>
			<mu-canvas canvasId="`mu-canvas`" ref="share" width="650" unit="rpx" height="1110" backgroundColor="#FFFFFF"
				:elementList="elementList" :auto="true"></mu-canvas>
		</view>
		<view class="buttons">
			<view class="buttons-top">
				<view class="buttons-left" @tap="baocun">保存到相册</view>
				<!-- #ifdef MP-WEIXIN -->
				<!-- <view class="buttons-right flex-row flex-item-center">
					<image  src="../../static/user/withtypeimg2.png" mode="scaleToFill"></image>
					<view @tap="sheare">微信分享</view>
				</view> -->
				<button class="wx-share flex-row flex-item-center" open-type="share">
					<image class="bnt-imgs" src="../../static/user/withtypeimg2.png" mode="scaleToFill"></image>
					<text>微信分享</text>
				</button>
				<!-- #endif -->
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				share_background: [
				],
				can: true,
				selected:0,
				// elementList: {
				// 	images: [{
				// 		path: "http://t6.xin.cn/uploads/20231113/a07068b23e1d4969d09f4105fee78631.png",
				// 		dx: 0,
				// 		dy: 0,
				// 		dWidth: '',
				// 		dHeight: '',
				// 		sx: 650 / 2,
				// 		sy: 860 / 2
				// 	}],
				// 	text: [{
				// 			value: "邀请码：",
				// 			color: "#999999",
				// 			size: "14",
				// 			font: "PingFang SC-Regular, PingFang SC;",
				// 			x: "13",
				// 			y: "460",
				// 			// backgroundColor:"#ff007f"
				// 		},
				// 		{
				// 			value: "g26ozk",
				// 			color: "#333333",
				// 			size: "18",
				// 			font: "PingFang SC-Regular, PingFang SC;",
				// 			x: "13",
				// 			y: "490",
				// 		},
				// 		{
				// 			value: "系统管理员邀您一起共享好物！",
				// 			color: "#999999",
				// 			size: "14",
				// 			font: " PingFang SC-Regular, PingFang SC;",
				// 			x: "13",
				// 			y: "518",
				// 		}
				// 	],
				// 	qr: [{
				// 		url: "http://t6.xin.cn/#/pages/user/code_login?invite_mobile=5",
				// 		dx: 241,
				// 		dy: 452,
				// 		size: 71,
				// 		color: "#000000",
				// 		backgroundColor: "#ffffff"
				// 	}]

				// }
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo
			}
		},
		onReady() {

			// this.$refs.share.redraw();
		},
		onLoad() {
			// console.log(uni.getStorageSync('init'));
			// let that = this
			// this.$store.dispatch("getUserInfo", () => {
			// 	that.chanhan()
			// });
		},
		onShow() {
			let that = this
			this.$store.dispatch("getUserInfo", () => {
				that.chanhan()
			});
		},
		methods: {
			//获取分享码
			chanhan() {
				// console.log("回调中");
				let ini = uni.getStorageSync("init");
				if (ini.share_background) {
					let that = this
					this.share_background = ini.share_background;
					// console.log(this.share_background);
					let share_backgrounds = [];
					if (ini.share_background.length > 0) {
						ini.share_background.forEach(item => {
							let tem = {
								images: [{
									path: that.$utils.cdnImg(item),
									dx: 0,
									dy: 0,
									dWidth: 325,
									dHeight: 430,
									sx: 0,
									sy: 0
								}],
								text: [{
										value: "邀请码：",
										color: "#999999",
										size: "14",
										font: "PingFang SC-Regular, PingFang SC;",
										x: "13",
										y: "460",
										// backgroundColor:"#ff007f"
									},
									{
										value: that.userInfo.mobile ? that.userInfo.mobile : "",
										color: "#333333",
										size: "18",
										font: "PingFang SC-Regular, PingFang SC;",
										x: "13",
										y: "490",
									},
									{
										value: (that.userInfo.nickname ? that.userInfo.nickname : "") +
											"邀您一起共享好物！",
										color: "#999999",
										size: "14",
										font: " PingFang SC-Regular, PingFang SC;",
										x: "13",
										y: "518",
									}
								],

							}
							// console.log(tem);
							if (that.userInfo.share_img) {
								tem.images.push({
									path: that.$utils.cdnImg(that.userInfo.share_img),
									dx: 241,
									dy: 452,
									dWidth: 71,
									dHeight: 71,
									sx: 0,
									sy: 0
								})
							} else {
								tem.qr = [];
								tem.qr.push({
									url: that.userInfo.share_str,
									dx: 241,
									dy: 452,
									size: 71,
									color: "#000000",
									backgroundColor: "#ffffff"
								})
							}
							share_backgrounds.push(tem)
						})
					}
					that.share_background = share_backgrounds;
				}
			},
			//保存海报
			baocun() {
				// console.log(this.$refs.share[0]);
				// this.$refs.share.saveImg();
				// this.$refs.share0.saveImg();
				this.$refs.share[this.selected].saveImg();
			},
			//修改swpier
			change(e){
				console.log(e);
				this.selected = e.detail.current
			}
		}
	}
</script>

<style lang="scss">
	.wx-share{
		width: 325rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		opacity: 1;
		border:none !important;
		>text{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 20rpx;
		}
	}
	.bnt-imgs{
		width: 46rpx;
		height: 46rpx;
		margin-left: 50rpx;
	}
	.buttons-top{
		/* #ifndef H5 */
		display: flex;
		justify-content: space-between;
		/* #endif */
	}
	.buttons {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 80rpx;
		// background-color: #ff5500;
		/* #ifdef H5 */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* #endif */
	}

	.buttons-right {
		width: 325rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		opacity: 1;

		>image {
			width: 46rpx;
			height: 46rpx;
			margin-left: 74rpx;
		}

		>view {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			text-align: center;
			line-height: 90rpx;
			margin-left: 20rpx;
		}
	}

	.buttons-left {
		width: 325rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #71DA38 0%, #50BC16 100%);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
	}

	.yqm-bottom {
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 20rpx;
	}

	.yqm-left {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.yqm-conter {
		font-size: 36rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #333333;
		margin-top: 6rpx;
	}

	.shang {
		margin-top: 45rpx;
		padding-bottom: 60rpx;
		margin-left: 26rpx;
		margin-right: 26rpx;
	}

	.erweima {
		width: 142rpx;
		height: 142rpx;
	}

	.swiper-item {
		width: 100%;

		>image {
			width: 100%;
		}
	}

	.swiper-box {
		width: 650rpx;
		height: 1110rpx;
	}

	.centos {
		width: 650rpx;
		background-color: #FFFFFF;
		margin-top: 30rpx;
		margin-left: 50rpx;
	}
</style>